<template>
  <div>
    <!--  确认分配按钮  -->
    <el-button
      v-show="showTran1"
      type="success"
      size="mini"
      :loading="loading1"
      plain
      style="float: left; margin-left:0; margin-right: 10px"
      @click="handleClick1"
    >
      {{ buttonName1 }}
    </el-button>

    <!--  提交代码按钮  -->
    <el-button
      v-show="showTran2"
      type="primary"
      size="mini"
      :loading="loading2"
      plain style="float: left; margin-left:0; margin-right: 10px"
      @click="handleClick2"
    >
      {{ buttonName2 }}
    </el-button>

    <el-checkbox-group
      v-show="showTran3"
      v-model="submitLocal"
      style="float: left; margin-top: 5px"
      :min="1"
      :max="4"
    >
      <el-checkbox v-for="item in codeResponse" :key="item.key" :label="item.value" :value="item.key" size="mini">
        {{ item.value }}
      </el-checkbox>
    </el-checkbox-group>
    <el-button v-show="showTran3" type="success" size="mini" :loading="loading3" plain style="float: left" @click="handleClick2Submit">{{ buttonName3 }}</el-button>
    <el-button v-show="showTran3" type="info" size="mini" plain style="float: left" @click="handleClick2Close">取消</el-button>

    <el-button v-show="showTran5" type="danger" size="mini" :loading="loading5" plain style="float: left; margin-left:0; margin-right: 10px" @click="handleClose">{{ buttonName5 }}</el-button>
  </div>
</template>
<script>
import { taskStart, eventReStart, taskCancel, taskSubmit} from '@/api/task'
export default {
  name: 'StartPop',
  props: ['row'],
  data() {
    const checkBlockDescribe = (rule, value, callback) => {
      !value ? callback(new Error('请输入阻塞原因')) : callback()
    }
    return {
      showTran1: false,
      showTran2: false,
      showTran3: false,
      showTran4: false,
      showTran5: false,
      showTran6: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      buttonName1: '确认分配',
      buttonName2: '代码提交',
      buttonName3: '确认',
      buttonName4: '申请测试',
      buttonName5: '关闭任务',
      submitLocal: ['SIT', 'UAT'],
      title: '确认完成该任务吗？',
      status: 0,
      showForm: false,
      disabled: false,
      form: {
        blockDescribe: ''
      },
      rules: {
        blockDescribe: [{ validator: checkBlockDescribe, trigger: 'blur' }]
      },
      codeResponse: [ // 'SIT', 'UAT', 'PP', 'PI']
        { key: 1, value: 'SIT' },
        { key: 2, value: 'UAT' },
        { key: 3, value: 'PP' },
        { key: 4, value: 'PI' }
      ]
    }
  },
  mounted() {
    this.init()
    this.tranShow()
    this.$nextTick(function() {
      this.init()
    })
  },
  created() {
    this.init()
  },
  methods: {
    showFormMethod() {
      this.showForm = true
    },
    handleClick1() {
      this.loading1 = true
      this.buttonName1 = '操作中...'
      const tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then(_ => {
        taskStart(this.row.taskId).then(response => {
          for (let i = 0; i < tableData.length; i++) {
            if (this.row.taskId === tableData[i].taskId) {
              tableData[i].status = 1
              tableData[i].taskCode = response.taskCode
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading1 = false
          this.status = 1
          this.tranShow()
          this.buttonName1 = '确认分配'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })
      })
    },
    handleClick2() {
      this.loading2 = true
      this.buttonName2 = '选择中...'
      this.showTran3 = true
      this.showTran1 = false
      this.showTran2 = false
      this.showTran4 = false
      this.showTran5 = false
      this.showTran6 = false
    },
    handleClick2Close() {
      this.loading2 = false
      this.buttonName2 = '代码提交'
      this.showTran1 = false
      this.showTran2 = true
      this.showTran3 = false
      this.showTran4 = false
      this.showTran5 = true
      this.showTran6 = false
    },
    handleClick2Submit() {
      this.loading2 = false
      this.loading3 = true
      this.buttonName2 = '代码提交'
      this.buttonName3 = '确认中...'
      const tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then(_ => {
        taskSubmit(this.row.taskId, this.submitLocal).then(_ => {
          for (let i = 0; i < tableData.length; i++) {
            if (this.row.taskId === tableData[i].taskId) {
              tableData[i].status = 6
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading3 = false
          this.buttonName3 = '确认'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.status = 6
          this.tranShow()
        })
      })
    },
    handleClick3() {
      this.loading3 = true
      this.buttonName3 = '确认中...'
      const tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then(_ => {
        taskTest(this.row.taskId).then(response => {
          for (let i = 0; i < tableData.length; i++) {
            if (this.row.peId === tableData[i].peId) {
              tableData[i].devStatus = 2
              tableData[i].peStatus = 0
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading3 = false
          this.buttonName4 = '开始测试'
          this.showTran4 = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.showTran1 = false
          this.showTran3 = false
          this.sleep(500).then(_ => {
            this.showTran2 = true
            this.showTran4 = true
          })
        })
      })
    },
    submitBlock(formName) {
      this.loading2 = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.sleep(1500).then(_ => {
            this.buttonName3 = '操作中...'
            this.loading2 = true
            this.disabled = true
            taskBlock(this.row.taskId, this.form.blockDescript).then(response => {
              this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 3)
              this.loading2 = false
              this.disabled = false
              this.showForm = false
              this.buttonName2 = '返回开发'
              this.buttonName3 = '阻塞任务'
              this.title = '确认返回该任务状态?'
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.showTran1 = false
              this.showTran2 = false
              this.showTran3 = false
              this.showTran4 = false
              this.sleep(500).then(_ => {
                this.showTran2 = true
              })
            })
          })
        }
      })
    },
    handleClose() {
      this.loading5 = true
      this.buttonName5 = '操作中...'
      const tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then(_ => {
        taskCancel(this.row.taskId).then(_ => {
          for (let i = 0; i < tableData.length; i++) {
            if (this.row.taskId === tableData[i].taskId) {
              tableData[i].status = 4
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.status = 4
          this.loading5 = false
          this.buttonName5 = '关闭事件'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.tranShow()
        })
      })
    },
    handleClick6() {
      this.loading6 = true
      this.buttonName6 = '操作中...'
      const tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then(_ => {
        eventReStart(this.row.peId).then(response => {
          for (let i = 0; i < tableData.length; i++) {
            if (this.row.peId === tableData[i].peId) {
              tableData[i].peStatus = 0
              tableData[i].devStatus = 1
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading6 = false
          this.buttonName6 = '返回分配'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.peStatus = 0
          this.devStatus = 1
          this.tranShow()
        })
      })
    },
    sleep(time) {
      return new Promise((resolve) => {
        setTimeout(resolve, time)
      })
    },
    init() {
      this.status = this.row.status
      this.tranShow()
    },
    tranShow() {
      this.showTran1 = false
      this.showTran2 = false
      this.showTran3 = false
      this.showTran4 = false
      this.showTran5 = false
      this.showTran6 = false
      // 编辑中的状态 启用确认分配按钮
      if (this.status === 0) {
        this.showTran1 = true
      }
      // 开发中的状态 启用代码提交与关闭任务按钮
      if (this.status ===1 ) {
        this.showTran2 = true
        this.showTran5 = true
      }
    }
  }
}
</script>

<style>
  .el-checkbox {
    margin-right: 5px !important;
  }
  .el-checkbox__label {
    padding-left: 3px !important;
    padding-right: 5px !important;
  }
</style>
